<!DOCTYPE html>
<script src="../resources/text-based-repaint.js"></script>
<script>
onload = () => {
  // Scroll the outerDiv until we reach innerDiv.
  outerDiv.scrollTop = 300;
  runRepaintAndPixelTest();
};

function repaintTest() {
    // Now scroll the innerDiv once to the green area.
    innerDiv.scrollTop = 406;
}
</script>
<!-- https://bugs.webkit.org/show_bug.cgi?id=71550 -->
<!-- For the test to pass you should not see any RED or PURPLE, only green -->
<div style="height: 300px; overflow-y: scroll;" id="outerDiv">
    <div style="height: 300px; background: purple;"></div>
    <div style="height: 400px; overflow-y: scroll;" id="innerDiv">
        <table>
            <tr><td style="height: 400px; width: 300px; background: red"></td></tr>
            <tr><td style="height: 400px; width: 300px; background: green"></td></tr>
        </table>
    </div>
</div>
